import React,{ Component } from "react";
import { View,Text,Image } from "react-native";
import PropTypes from "prop-types";
import { Modal,TouchableOpacity,StyleSheet,DeviceInfo } from "react-native";
export default class MenuDialog extends Component {
    state = {
        visable:false,
    };
    Show(){
        this.setState({
            visable:true
        })
    }
    dismiss(){
        this.setState({
            visable:false
        })
    }
    render(){
        const { onClose,menus,onSelect,theme } = this.props;
        return (
            <Modal
            transparent={true}
            visible={this.state.visable}
            onRequestClose={()=>onClose()}
            >
            <TouchableOpacity
                style={ styles.container }
            onPress={()=>this.dismiss()}
            >
            <Image source={ require('../../res/image/arrow-top.png') } style={ styles.arrow } />
                <View
                style={styles.content}
                >
                    {menus.map((result,i,arr)=>{
                        let menu = arr[i];
                        return (
                            <TouchableOpacity
                            key={i}
                            onPress={()=>{
                                onSelect(arr[i])
                            }}
                            underlayColor={ 'transparent' }
                            >
                                <View style={{ alignItems: 'center',flexDirection: 'row' }}>
                                    <Image source={menu.icon} resizeMode={'stretch'} style={[styles.icon,theme.styles.tabBarSelectedIcon]} />
                                    <Text style={styles.text}>
                                        { menu.name }
                                    </Text>
                                    {
                                        i!==menus.length-1?<View style={ styles.line }></View>:null
                                    }
                                </View>
                            </TouchableOpacity>
                        )
                    })}
                </View>
            </TouchableOpacity>
            </Modal>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex: 1,
        backgroundColor:'rgba(0,0,0,0.6)',
        alignItems: 'flex-end',
    },
    arrow:{
        marginTop: 56+(DeviceInfo.isIPhoneX_deprecated?24:0),
        width:16,
        height:16,
        marginRight: 18,
        resizeMode: 'contain'
    },
    text:{
        fontSize:16,
        color:'black',
        fontWeight: '400',
        paddingRight: 15
    },
    line:{
        height:0.3,
        backgroundColor: 'darkgray',
    }
});
MenuDialog.propTypes = {
  menus:PropTypes.array.isRequired,
    onSelect: PropTypes.func.isRequired,
    theme:propTypes.object,
    onClose:PropTypes.func
};
MenuDialog.defaultProps={
  menus:[],
};